@use 'sass:math';
@use '@material/select/select-theme';
@use '@material/select/select-icon-theme';
@use '@material/menu-surface/mixins' as menu-surface-mixins;
@use '@material/floating-label/mixins' as floating-label-mixins;
@use '@material/floating-label/variables' as floating-label-variables;
@use '@material/ripple/ripple-theme';
@use '@material/rtl/mixins' as rtl-mixins;
@use '@material/feature-targeting/index' as feature-targeting;

@mixin core-styles($query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  .mdc-select--activated {
    z-index: 8;
  }

  .smui-select--standard {
    .mdc-select__dropdown-icon {
      @include rtl-mixins.reflexive-box(
        margin,
        left,
        math.div(select-theme.$arrow-padding, 2)
      );
    }

    &.mdc-select--with-leading-icon .mdc-select__icon {
      position: relative;
      margin: 0;

      @include rtl-mixins.reflexive-box(
        margin,
        right,
        (select-icon-theme.$icon-horizontal-margin) * -2
      );

      @include rtl-mixins.reflexive-position(
        left,
        (
            select-icon-theme.$icon-size +
              select-icon-theme.$icon-horizontal-margin
          ) * -1
      );
    }

    // From select
    @include _padding-horizontal(
      $left: 0,
      $left-with-leading-icon: select-icon-theme.$icon-size +
        select-icon-theme.$icon-horizontal-margin,
      $right: 0,
      $query: $query
    );

    // From select-ripple
    .mdc-select__anchor {
      @include ripple-theme.states-base-color(
        transparent,
        $ripple-target: select-theme.$ripple-target,
        $query: $query
      );
      @include ripple-theme.states-opacities(
        (
          hover: ripple-theme.states-opacity(transparent, hover),
          focus: ripple-theme.states-opacity(transparent, focus),
        ),
        $ripple-target: select-theme.$ripple-target,
        $query: $query
      );
    }

    // From select-filled
    @include select-theme.filled-height(select-theme.$height, $query: $query);

    @include select-theme.container-fill-color(
      (
        default: transparent,
        disabled: transparent,
      ),
      $query: $query
    );

    @include select-theme.bottom-line-color(
      (
        default: select-theme.$bottom-line-idle-color,
        focus: primary,
        hover: select-theme.$bottom-line-hover-color,
        disabled: select-theme.$disabled-bottom-line-color,
      ),
      $query: $query
    );

    @include truncate-floating-label-max-width(
      $leading-icon-size: 0,
      $dropdown-icon-size: select-icon-theme.$icon-size,
      $query: $query
    );

    @include menu-surface-mixins.flatten-top-when-opened-below($query: $query);

    &.mdc-select--focused.mdc-line-ripple::after {
      @include feature-targeting.targets($feat-structure) {
        transform: scale(1, 2);
        opacity: 1;
      }
    }

    .mdc-floating-label {
      @include feature-targeting.targets($feat-structure) {
        @include rtl-mixins.reflexive-position(left, 0);
      }
    }

    &.mdc-select--with-leading-icon {
      @include leading-icon-floating-label-position(
        select-icon-theme.$icon-size,
        $query: $query
      );

      @include truncate-floating-label-max-width(
        $leading-icon-size: select-icon-theme.$icon-size,
        $dropdown-icon-size: select-icon-theme.$icon-size,
        $query: $query
      );
    }

    & + .mdc-select-helper-text {
      margin-left: 0;
      margin-right: 0;
    }
  }
}

// See: https://github.com/material-components/material-components-web/blob/v14.0.0/packages/mdc-select/_select-theme.scss#L1499
@mixin leading-icon-floating-label-position(
  $icon-size: select-icon-theme.$icon-size,
  $query: feature-targeting.all()
) {
  $feat-structure: feature-targeting.create-target($query, structure);
  $icon-total-width: $icon-size + select-icon-theme.$icon-horizontal-margin;

  .mdc-floating-label {
    @include feature-targeting.targets($feat-structure) {
      @include rtl-mixins.reflexive-position(left, $icon-total-width);
    }
  }
}

// See: https://github.com/material-components/material-components-web/blob/v14.0.0/packages/mdc-select/_select-theme.scss#L1586
@mixin truncate-floating-label-max-width(
  $leading-icon-size,
  $dropdown-icon-size,
  $query: feature-targeting.all()
) {
  $truncation: select-icon-theme.$icon-horizontal-margin + $dropdown-icon-size;

  @if $leading-icon-size > 0 {
    $truncation: $truncation +
      select-icon-theme.$icon-horizontal-margin +
      $leading-icon-size;
  } @else {
    $truncation: $truncation + select-theme.$outline-label-offset;
  }

  .mdc-floating-label {
    @include floating-label-mixins.max-width(
      calc(100% - #{$truncation}),
      $query: $query
    );
  }

  .mdc-floating-label--float-above {
    $scale: floating-label-variables.$float-scale;
    @include floating-label-mixins.max-width(
      calc(100% / #{$scale} - #{$truncation} / #{$scale}),
      $query: $query
    );
  }
}

// See: https://github.com/material-components/material-components-web/blob/v14.0.0/packages/mdc-select/_select.scss#L484
@mixin _padding-horizontal(
  $left,
  $left-with-leading-icon,
  $right,
  $query: feature-targeting.all()
) {
  $feat-structure: feature-targeting.create-target($query, structure);

  .mdc-select__anchor {
    @include feature-targeting.targets($feat-structure) {
      @include rtl-mixins.reflexive-property(padding, $left, $right);
    }
  }

  &.mdc-select--with-leading-icon .mdc-select__anchor {
    @include feature-targeting.targets($feat-structure) {
      @include rtl-mixins.reflexive-property(
        padding,
        $left-with-leading-icon,
        $right
      );
    }
  }
}
